<template>
  <el-form
    ref="form"
    :model="formConfig.formModel"
    v-bind="formConfig.form"
    label-width="110px"
  >
    <el-row :gutter="20">
      <template v-for="(item, i) in formConfig.formList">
        <el-col :span="item.span ? item.span : 12" :key="i" v-if="getField(item.hide)">
          <el-form-item v-bind="item" :prop="item.prop">
            <div v-if="item.readOnly">
              {{ formConfig.formModel[item.prop] || "-" }}
            </div>
            <hm-radio
              v-model="formConfig.formModel[item.prop]"
              :props="item.props"
              v-else-if="item.type === 'radio'"
            />
            <slot
              :name="item.slotName"
              v-else-if="item.type === 'slot'"
            />
            <component
              :is="item.type"
              v-bind="item.props"
              v-model="formConfig.formModel[item.prop]"
              v-else
            />
          </el-form-item>
        </el-col>
      </template>
    </el-row>
  </el-form>
</template>

<script>
import { isFunction } from '@/utils/utils'
export default {
  name: 'HmForm',
  props: {
    formConfig: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  created() {
    // 初始化参数
  },
  methods: {
    getField(field) {
      return  isFunction(field) ? !field() : !field
    }
  }
}
</script>
